<template>
    <div class="rightFour">
        <ThemeTitle :title="title"/>
        <div class="gardensInfo">   
            <div class="gardens">
                <span>重点产业园区：</span>
                <span>258个</span>
            </div>
            <el-select class="inputRight" v-model="state1" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
            
            
        </div>
        
        <div id="gardenChart">

        </div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle"
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  ref,
  provide,
  reactive
} from 'vue'
import { useRouter } from 'vue-router'
export default {
    components: {
        ThemeTitle
    },
   
    setup(){
        const title = provide("title","产业分布")
        const {ctx} = getCurrentInstance()
        const state1 = ref(" ")
        const options =  [{
                value: '选项1',
                label: '园区0'
            }, {
                value: '选项2',
                label: '园区1'
            }, {
                value: '选项3',
                label: '园区21'
            }, {
                value: '选项4',
                label: '园区2'
            }, {
                value: '选项5',
                label: '园区3'
            }
            , {
                value: '选项5',
                label: '园区4'
            }
            , {
                value: '选项5',
                label: '园区5'
            }
            , {
                value: '选项5',
                label: '园区6'
            }
            , {
                value: '选项5',
                label: '园区7'
            }
        ]
        function drawChart(){
            var dom = document.getElementById("gardenChart");
            var myChart = ctx.$echarts.init(dom);
            let option = {
                    grid: {
                        top: "20%",
                        bottom: "20%",//也可设置left和right设置距离来控制图表的大小
                        right:'5%'
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true
                            }
                        }
                    },
                    xAxis: {
                        data: [
                            "海口",
                            "三亚",
                            "儋州",
                            "文昌",
                            "琼海市",
                            "东方市",
                            "万宁市",
                            "定安县",
                            "屯昌县",
                            "澄迈县"
                        ],
                        axisLine: {
                            show: true, //隐藏X轴轴线
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            show: false //隐藏X轴刻度
                        },
                        axisLabel: {
                            show: true,
                            
                                color: "#fff" //X轴文字颜色
                            ,
                            rotate:40  
                        },
                        
                    },
                    yAxis: [{
                            type: "value",
                            name: "个",
                            nameTextStyle: {
                                color: "#fff"
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#FFFFFF'
                                }
                            },
                            axisLabel: {
                                show: true,
                                
                                    color: "#fff"
                                
                            },
                            
                        },
                        {
                            type: "value",
                            name: "同比",
                            nameTextStyle: {
                                color: "#ebf8ac"
                            },
                            show:false,
                            position: "right",
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                formatter: "{value} %", //右侧Y轴文字显示
                                
                                    color: "#ebf8ac"
                                
                            }
                        },
                        {
                            type: "value",
                            gridIndex: 0,
                            min: 50,
                            max: 100,
                            splitNumber: 8,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                            },
                            splitArea: {
                                show: true,
                                areaStyle: {
                                    color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                                }
                            }
                        }
                    ],
                    series: [{
                            name: "销售水量",
                            type: "line",
                            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                            smooth: true, //平滑曲线显示
                            showAllSymbol: true, //显示所有图形。
                            symbol: "circle", //标记的图形为实心圆
                            symbolSize: 0, //标记的大小
                            itemStyle: {
                                //折线拐点标志的样式
                                color: "#058cff",
                                
                            },
                            lineStyle: {
                                color: "#058cff"
                            },
                            areaStyle:{
                                color: "rgba(5,140,255, 0.2)"
                            },
                            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5,6,7]
                        },
                        {
                            name: "主营业务",
                            type: "bar",
                            barWidth: 15,
                            // itemStyle: {
                                normal: {
                                    color: ctx.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: "#00FFE3"
                                        },
                                        {
                                            offset: 1,
                                            color: "#4693EC"
                                        }
                                    ])
                                },
                                borderRadius: [30, 30, 30, 30],
                            // },
                            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5,6,7]
                        }
                    ]
                };
            myChart.setOption(option);
        }
       
        onMounted(() => {
            drawChart();
            
            
        });
        return {
            title,
            state1,
            options
        }
    }
}
</script>
<style>
/* 031D2B */
    .el-select__popper.el-popper[role=tooltip]{
        background:#031D2B;
        
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
        background:#06C8FF;
        color:#08434C
    }
    .inputRight .el-input__inner{
        background:#031C23;
        border:1px solid #08434C;
        color:#fff
    }   
    .inputRight .el-input__inner::-webkit-input-placeholder{
        color:#fff;
    }
</style>
<style lang="stylus" scoped>
    @import '../../../assets/varibles.styl'
    .gardensInfo
        display:flex
        justify-content:space-between
        .gardens
            margin-top:vh(11)
            margin-bottom:vh(10)
            margin-left:vw(15)
            text-align:left
            span:nth-child(1)
                font-size: vw(12)
            span:nth-child(2)
                font-size: vw(15)
                color: #FFBD39
            
    #gardenChart
        width:100%
        height:vh(150)
</style> 